<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JSON 转换器</title>
</head>

<body>
    <h1>JSON 转换器</h1>
    <ul>
        <li><a href="https://wejson.cn/excel2json/" target="_blank">Excel 转换 JSON</a></li>
        <li><a href="https://wejson.cn/json2excel/" target="_blank">JSON 转换 Excel</a></li>
    </ul>
    <div class="box">
        <div class="childBox">
            <form>
                <button type="submit">转换</button>
                <label for="json-input">输入 JSON 数据：</label><br />
                <textarea id="json-input" rows="100" cols="80%"></textarea>
            </form>
        </div>
        <div class="childBox">
            <h2>输出 JavaScript 对象：</h2>
            <pre id="output"></pre>
        </div>
    </div>



    <script>
        const form = document.querySelector('form');
        const output = document.querySelector('#output');

        form.addEventListener('submit', event => {
            event.preventDefault();
            const jsonInput = document.querySelector('#json-input').value;
            try {
                const data = JSON.parse(jsonInput);
                const stringifiedData = JSON.stringify(data, (key, value) => {
                    if (typeof value === 'string') {
                        try {
                            return JSON.parse(value);
                        } catch {
                            return value.replace(/\"/g, '');
                        }
                    }
                    return value;
                }, 2).replace(/\"([^(\")"]+)\":/g, "$1:");



                output.textContent = stringifiedData;

            } catch (error) {
                output.textContent = `无法解析输入：${error.message}`;
            }
        });
    </script>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
        }

        .childBox {
            width: 44%;
            background-color: #ccc;
            margin: 10px;
            padding: 10px;
        }
    </style>

</body>

</html>